<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
	<link rel="stylesheet" href="../css/sendComment.css" media="all" />
</head>

<body class="gray">
	<div class="mui-content mui-scroll-wrapper" style="padding-bottom: 40px;">
		 <div class="mui-scroll refund loading" id="vueMain">
			   <ul class="mui-table-view" style="margin-top: 0;">
			   		<li class="mui-table-view-cell order_num">NO.{{order}}</li> 
			       <li class="mui-table-view-cell mui-media product">
			           <a href="javascript:;">
			               <img class="mui-media-object mui-pull-left" :src="list.order_goods.img" />
			               <div class="mui-media-body">
			                  	{{list.order_goods.name}}
			                  	<p>付款日期:{{list.order_goods.pay_time}}</p>
			                  	<p>实付款：¥{{list.order_goods.order_amount}} <span>数量：1</span></p>
			               </div>
			           </a>
			       </li>
			       <li class="mui-table-view-cell mui-media">
			       	 	<img class="mui-media-object mui-pull-right" style="border-radius: 50%;" :src="list.order_goods.shop_logo" />
			       	 	 <div class="mui-media-body shopname">
			       	 	 	{{list.order_goods.shop_name}}
			       	 	 </div>
			       </li>
			   </ul>
			   <ul class="mui-table-view reason">
		           <li class="mui-table-view-cell">
		               <a class="mui-navigate-right">
		               		<span class="mui-pull-right">请选择</span>
		                   退款原因
		               </a>
		           </li>
		       </ul>
			   
			   <div class="text" style="background: #FFF;">
			   		<textarea name="" rows="" cols="" v-model="content" placeholder="详细原因"></textarea>
			   </div>
			  <div class="mformbox" style="display: none;">
				    	<form class="mui-input-group invs">
				    		<div class="mui-input-row tis">
				    	        <label>退款人信息</label>
				    	    </div>
				    	    <div class="mui-input-row">
				    	        <label>退款人姓名</label>
				    	        <input type="text" class="mui-input-clear" v-model="list.user.name" disabled="disabled"  placeholder="" value="">
				    	    </div>
				    	    <div class="mui-input-row">
				    	        <label>退款人手机</label>
				    	        <input type="text" class="mui-input-clear" v-model="list.user.mobile" disabled="disabled"  placeholder="">
				    	    </div>
				    	</form>
			    </div>
			   <div class="mui-content-padded" style="margin:25px 10px;">
					<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block enter" >确定</button>
				</div>
	  </div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps , views, user;
	mui.init();
	mui.plusReady(function () {
		views = bexta.getWebview();
		user = bexta.getStorage(USER);
		bexta.ajax(api.refound, function(res){
			intVue(res);
		}, {data:{uid:user.uid, order_no:views.order_no}});
	});
	function intVue(res){
		apps = new Vue({
			el:"#vueMain",
			data:{
				order:views.order_no,
				list:res || {},
				type:'',
				content:''
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005 
				});
				var self = this;
				mui('#vueMain').on('tap','a' , function(){
					self.type = this.innerHTML;
				});
				var picker = new mui.PopPicker();
				var arr = [];
				mui.each(self.list.reason,function(){
					arr.push({
						text:this,
						value:this
					});
				});
				picker.setData(arr);
				document.querySelector('.reason li').addEventListener('tap', function(){
					var that = this;
					picker.show(function(item){
						that.querySelector('span.mui-pull-right').innerHTML = item[0].text;
						self.type = item[0].text;
					});
				});
				//提交
				mui('#vueMain').on('tap', '.enter', function(){
					var send = {};
					if( apps.list.type == '') {
						mui.toast("请选择退款原因");
						return ;
					}
					send['reason'] = apps.type;
					send['content'] = apps.content;
					send['uid'] = user.uid;
					send['order_no'] = views.order_no;
					bexta.ajax(api.save_refund, function(res,msg){
						mui.toast(msg);
						if( !res ){
							mui.fire(views.opener(), 'reloadOrder', {
								order_no:views.order_no
							});
							mui.later(function(){
								mui.back();
							},20);
						}
					}, {data:send});
					
				});
			}
		});
	}
</script>
</body>
</html>